<!-- <template>
  <div id="app">
    hello world!!!
    <parent/>
  </div>
  
</template>

<script>
import parent from "./parent.vue"
export default {
  name: 'App',
  components: {
    parent
  }
}
</script>

<style>

</style> -->


<!-- <template>
  <div id="app">
    <kuangjia :visible="showModel" @on-confirm='confirm'/>
    <button class="btn1" @click="showModel=true">打开模态框</button>
  </div>
</template>

<script>

import kuangjia from "./kuangjia.vue";
export default {
  name: "App",
  data(){
    return {
      showModel:false
    }
  },
  components:{
    kuangjia
  },
  methods:{
    confirm(){
      this.showModel = false
    }
  }
};
</script>

<style>
  #app  .btn1{
            background-color: blue;
            width: 160px;
            height: 30px;
            border:none;
            border-radius: 5px;
            color:white;
            margin:20px
        }
</style> -->


<template>
  <div id="app">
    <textarea :value="msg" @input="update"></textarea>
    <markdown :msg='msg'/>
  </div>
</template>


<script>

function debounce(fn, t) {
    console.log(this);
    //核心:setTimeout 如果逻辑处理在间隔时间之内,那么就要清掉上个定时器,只保留一个定时器
    let timer = null;
    return function (e) {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            //此处处理业务逻辑
            if (fn) {
                fn = fn.bind(this)
                fn(e)
            }
        }, t)
    }
}

import markdown from "./markdown.vue"

export default {
  name: "App",
  components:{
    markdown,
  },
  data(){
    return {
      msg: "hello"
    }
  },

   methods: {
      update: debounce(function (e) {
                console.log(this);
                this.msg = e.target.value;
            }, 300)
  }
};
</script>

<style>
  *{
    padding: 0;
    margin: 0;
  }
  #app{
    display:flex;
  }
  textarea{
    width: 50%;
    height: 600px;
    padding: 20px;
    box-sizing: border-box;
    background: url("./assets/1.png") no-repeat;
  }
</style>

